<div nz-row nzGutter="5">
    <div nz-col nzSpan="5">
        <button nz-button nzType="primary" (click)="showModal()" *ngIf="bornRoles.add">新增标签</button>
        <button nz-button nzType="primary" class="margin-left-16" (click)="save()" *ngIf="bornRoles.save">保存</button>
    </div>
    <div nz-col nzSpan="9"></div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">物料编码：</label>
    </div>
    <div nz-col nzSpan="3">
        <input appHotSearch (hotSearchEmit)="getSearchData()" type="text" [(ngModel)]="txtCode" nz-input placeholder="输入物料编码"/>
    </div>
    <div nz-col nzSpan="2">
        <label class="line-height-32-prefix">物料名称：</label>
    </div>
    <div nz-col nzSpan="3">
        <input appHotSearch (hotSearchEmit)="getSearchData()" type="text" [(ngModel)]="txtName" nz-input placeholder="输入物料名称"/>
    </div>
    <!-- <div nz-col nzSpan="4">
        <button nz-button nzType="primary" (click)="getSearchData()">查询</button>
    </div> -->
</div>
<!-- <div nz-row class="margin-top-16">
    <button nz-button nzType="primary" (click)="showModal()" *ngIf="bornRoles.add">新增物料</button>
    <button nz-button nzType="primary" class="margin-left-16" (click)="save()" *ngIf="bornRoles.save">保存</button>
</div>     -->
<div nz-row class="margin-top-16">
    <nz-table #basicTable nzBordered [nzData]="listOfData" nzSize="small"  [nzFrontPagination]="false">
        <thead>
        <tr>
            <!-- <th nzShowCheckbox [(nzChecked)]="isAllChecked" (nzCheckedChange)="checkAll($event)"></th> -->
            <th colspan="1">选择</th>
            <th>物料编码</th>
            <th>物料名称</th>
            <th>标签</th>
            <!-- <th>Action</th> -->
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of basicTable.data" class="editable-row">
            <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="checkSingle(data)"></td>
            <td>
                <input type="hidden" value="{{data.id}}"/>
                <span>{{ data.materialCode }}</span>
            </td>
            <td>{{ data.materialName }}</td>
            <td>
                <input nz-input [(ngModel)]="data.label" />
            </td>
            <!-- <td>
            <a>Action 一 {{ data.name }}</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a>Delete</a>
            </td> -->
        </tr>
        </tbody>
    </nz-table>
</div>
<div nz-row class="margin-top-16">
    <nz-pagination class="float-right" [nzPageIndex]="pageIndex" (nzPageIndexChange)="clickPage($event)" [nzTotal]="totalSize" [nzPageSize]="pageSize" [nzShowTotal]="totalTemplate"></nz-pagination>
    <ng-template #totalTemplate let-total> 总共 {{ totalSize }} 条 </ng-template>
</div>

<nz-modal [nzStyle]="{left:'25%',top:'18%'}" appDragModal [nzGetContainer]="modalDomBox" nzTitle="选择物料" [(nzVisible)]="isVisible" [nzOkLoading]="isOkLoading" 
(nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="50%">
    <div nz-row>
        <div nz-col nzSpan="4" >
            <label class="line-height-32-prefix">物料编码：</label>
        </div>
        <div nz-col nzSpan="6">
            <input type="text" [(ngModel)]="txtAltCode" nz-input placeholder="输入物料编码"/>
        </div>
        <div nz-col nzSpan="4">
            <label class="line-height-32-prefix">物料名称：</label>
        </div>
        <div nz-col nzSpan="6">
            <input type="text" [(ngModel)]="txtAltName" nz-input placeholder="输入物料名称"/>
        </div>
        <div nz-col nzSpan="4">
            <button nz-button nzType="primary" class="margin-left-16" (click)="getAltSearchData()">查询</button>
        </div>
    </div>
    <div nz-row class="margin-top-16">
        <nz-table #altBasicTable [nzData]="altListOfData" [nzFrontPagination]="false" [nzBordered]="true" nzSize="small">
            <thead>
            <tr>
                <th>选择</th>
                <th>物料编码</th>
                <th>物料名称</th>
                <!-- <th>规格</th>
                <th>数量</th> -->
                <th>单位</th>
                <th>单价</th>
                <!-- <th>Action</th> -->
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of altBasicTable.data">
                <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="altCheckSingle(data)"></td>
                <td>
                    <input type="hidden" value="{{data.id}}" />
                    <span>{{ data.code }}</span>
                </td>
                <td>{{ data.name }}</td>
                <!-- <td>{{ data.spac }}</td>
                <td>--</td> -->
                <td>{{ data.unit }}</td>
                <td>{{ data.price }}</td>
                <!-- <td>
                <a>Action 一 {{ data.name }}</a>
                <nz-divider nzType="vertical"></nz-divider>
                <a>Delete</a>
                </td> -->
            </tr>
            </tbody>
        </nz-table>
    </div>
    <div nz-row class="margin-top-16">
        <nz-pagination class="float-right" [nzPageIndex]="altPageIndex" (nzPageIndexChange)="altClickPage($event)" [nzTotal]="altTotalSize" [nzPageSize]="altPageSize" [nzSize]="'small'" [nzShowTotal]="altTotalTemplate"></nz-pagination>
        <ng-template #altTotalTemplate let-total> 总共 {{ altTotalSize }} 条 </ng-template>
    </div>
</nz-modal>
    
